<template>
  <Dialog ref="dialog" width="800" :title="title">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      label-width="auto"
      :rules="rules"
      status-icon
    >
      <el-row class="el-col-24">
        <el-form-item class="form_item el-col-10" label="菜单名" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入菜单名" />
        </el-form-item>
        <el-form-item
          class="form_item el-col-10"
          label="权限"
          prop="permissions"
        >
          <el-input
            v-model="ruleForm.permissions"
            placeholder="请输入按钮权限"
          />
        </el-form-item>
      </el-row>
      <el-row class="el-col-24">
        <el-form-item class="form_item el-col-10" label="规则" prop="url">
          <el-input v-model="ruleForm.url" placeholder="请输入规则" />
        </el-form-item>
        <el-form-item class="form_item el-col-10" label="路径" prop="path">
          <el-input v-model="ruleForm.path" placeholder="请输入路径" />
        </el-form-item>
      </el-row>
      <!-- <el-row class="el-col-24">
        <el-form-item class="form_item el-col-10" label="id" prop="storeId">
          <el-input v-model="ruleForm.storeId" placeholder="请输入id" />
        </el-form-item>
      </el-row> -->
      <el-divider />
      <div class="right">
        <el-button class="height40" @click="closeChange">取消</el-button>
        <el-button type="primary" class="height40" @click="submit"
          >提交</el-button
        >
      </div>
    </el-form>
  </Dialog>
</template>
<script setup>
import Dialog from '@/components/Dialog/Dialog.vue';
import { ElMessage } from 'element-plus';
import { menuSave } from '@/api/appv2/appv2';
import { ref } from 'vue';
const emit = defineEmits(['getMenuConfig']);
let { proxy } = getCurrentInstance();
const ruleForm = ref({
  name: '',
  permissions: '',
  url: '',
  path: '',
  id: '',
});
const dialog = ref(null);
const title = ref('新建菜单');
const parentInfo = ref({});
const rules = {
  name: [{ required: true, trigger: 'blur', message: '请输入目录名称' }],
  url: [{ required: true, trigger: 'blur', message: '请输入规则' }],
  path: [{ required: true, trigger: 'blur', message: '请输入路径' }],
  // storeId: [{ required: true, trigger: 'blur', message: '请输入id' }],
};

function submit() {
  let formData = { ...ruleForm.value }; // Assuming ruleForm is defined

  // Determine type based on title.value
  let type = 0;
  if (title.value.includes('按钮')) {
    type = 2;
  } else if (title.value.includes('新增菜单')) {
    type = 1;
  } else if (title.value.includes('编辑菜单')) {
    type = 3;
  }

  // Prepare object based on type and validation
  let submitData = {
    level: '2',
  };

  if (type != 3) {
    submitData.parentId =
      type == 1 ? parentInfo.value.id : parentInfo.value.parentId;
    submitData.type = type;
  } else {
    submitData.id = parentInfo.value.id;
    submitData.parentId = parentInfo.value.parentId;
  }
  // 机构后台首页便携菜单需要的参数，必填，随便写个1，这块用不到
  submitData.iconFont = '1';
  // Validate form and submit data
  proxy.$refs.ruleFormRef.validate((valid) => {
    if (valid) {
      menuSave({ ...formData, ...submitData })
        .then((res) => {
          if (res.code == 20000) {
            ElMessage.success('操作成功');
            dialog.value.closeChange();
            emit('getMenuConfig');
          }
        })
        .catch(() => {});
    } else {
      ElMessage.warning('请完善信息');
    }
  });
}

// 打开弹窗
function openchange(val, type) {
  // val.storeId = localStorage.getItem('storeId');
  parentInfo.value = val;
  if (type == 1) {
    title.value = '新增菜单';
    ruleForm.value = [];
  } else if (type == 2) {
    if (val) {
      title.value = '新增按钮';
      ruleForm.value = [];
    } else {
      title.value = '编辑按钮';
      ruleForm.value = val;
    }
  } else if (type == 3) {
    if (val.type == 1) {
      title.value = '编辑菜单';
      ruleForm.value = val;
    } else {
      title.value = '编辑按钮';
      ruleForm.value = val;
    }
  }

  dialog.value.openChange();
}
// 关闭弹窗
function closeChange() {
  dialog.value.closeChange();
}
defineExpose({
  openchange,
});
</script>
<style>
.form_item {
  margin-bottom: 20px !important;
}

.right {
  margin-left: 40px;
}
</style>
